<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    pageContext.setAttribute("basepath", request.getContextPath());
%>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" align="center">
    <tr>
        <th colspan="7">订单信息</th>
    </tr>

    <tr>
        <td align="center">id</td>
        <td align="center">name</td>
        <td align="center">ordertime</td>
        <td align="center">totalprice</td>
        <td align="center">status</td>
        <td colspan="2" align="center">action <a href="${basepath}/add">新增</a></td>
    </tr>

    <c:forEach items="${orders}" var="o">
        <tr>
            <td>${o.id}</td>
            <td>${o.name}</td>
            <td>${o.ordertime}</td>
            <td>${o.totalprice}</td>
            <td>${o.status==1?"已支付":"未支付"}</td>
            <td><a href="${basepath}/order/${o.id}" class="deleteBtn">删除</a></td>
            <td><a href="${basepath}/getOrder/${o.id}">修改</a></td>
        </tr>
    </c:forEach>
</table>

<form method="post" id="delete_form_id">
    <input type="hidden" name="_method" value="delete">
</form>

<%--
    在页面加载完毕之后 跟class名是deletebtn的元素绑定单击事件
    确认是否要删除 根据类选择器找到表单对象 修改其action属性值
    调用表单对象的submit方法动态提交表单
    this代表js中触发单击事件的dom元素
--%>
<script>

    $(function () {
        $(".deleteBtn").click(function () {
            if (confirm("确认要删除吗?")) {
                let del_form = $("#delete_form_id");
                del_form.attr("action", this.href);
                del_form.submit();
            }
            return false;
        })
    })
</script>
</body>
</html>